<template>
	<view class="interaction10">
		<!-- 导航栏 -->
		<!-- 		<uni-nav-bar fixed="true" statusBar="true">
			<template>
				<view class="title">任务详情</view>
			</template>
			<template slot="left">
				<navigator url="/pages/bountyHunter7/bountyHunter7" hover-class="none">
					<uni-icons type="arrowleft" size="30" ></uni-icons>
				</navigator>
			</template>
			<template slot="right">
				<text class="navRight">
					会议
				</text>
			</template>
		</uni-nav-bar> -->
		<view class="interaction10-header">
			<!-- 内容 -->
			<view class="interaction10-header-box">
				<view>
					<text class="iconfont interaction10-header-box-title" @tap="goHome">&#xe614;</text>
					<text>政民互动</text>
				</view>
				<view>
					<text>会议</text>
				</view>
			</view>
		</view>
		<view class="padding30">
			<view class="interactionItem">
				<view class="flex">
					<image src="/static/image/tabbar/tb51.png" mode="aspectFill" class="taskDatalAvater"></image>
					<view>
						<view>张三</view>
						<view class="faBuTime">7月2日 22：07</view>
					</view>
				</view>
				<view>
					<view class="taskDetailMiaosu">
						任务描述任务描述任务描述任务描述任务描述任务描述任务描述
						任务描述任务描述任务描述任务描述任务描述任务描述任务描述
						任务描述任务描述任务描述任务描述任务描述任务描述任务描述
					</view>
					<view>
						<image src="/static/image/tabbar/tb31.png" class="taskDetaiImg" mode="aspectFill"></image>
						<image src="/static/image/tabbar/tb31.png" class="taskDetaiImg" mode="aspectFill"></image>
						<image src="/static/image/tabbar/tb31.png" class="taskDetaiImg" mode="aspectFill"></image>
					</view>
					<view class="justifyflex interDianzan">
						<uni-icons type="heart" size="20" color="#999"></uni-icons>
						<uni-icons type="chat" size="20" color="#999"></uni-icons>
					</view>
					<view>
						<view class="interZanBox">
							<uni-icons type="hand-thumbsup-filled"></uni-icons>
							<text>小李、小张、小何觉得很赞</text>
						</view>
						<view>
							<view>
								<text class="interName">小李：</text>
								<text>真好啊！</text>
							</view>
							<view class="itemPinglun">
								<text class="interName">小张：</text>
								<text>太适合我们了！</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="interactionItem noBorder">
				<view class="flex">
					<image src="/static/image/tabbar/tb51.png" mode="aspectFill" class="taskDatalAvater"></image>
					<view>
						<view>张三</view>
						<view class="faBuTime">7月2日 22：07</view>
					</view>
				</view>
				<view>
					<view class="taskDetailMiaosu">
						任务描述任务描述任务描述任务描述任务描述任务描述任务描述
						任务描述任务描述任务描述任务描述任务描述任务描述任务描述
						任务描述任务描述任务描述任务描述任务描述任务描述任务描述
					</view>
					<view>
						<image src="/static/image/tabbar/tb31.png" class="taskDetaiImg" mode="aspectFill"></image>
						<image src="/static/image/tabbar/tb31.png" class="taskDetaiImg" mode="aspectFill"></image>
						<image src="/static/image/tabbar/tb31.png" class="taskDetaiImg" mode="aspectFill"></image>
					</view>
					<view class="justifyflex interDianzan">
						<uni-icons type="heart" size="20" color="#999"></uni-icons>
						<uni-icons type="chat" size="20" color="#999"></uni-icons>
					</view>
					<view>
						<view class="interZanBox">
							<uni-icons type="hand-thumbsup-filled"></uni-icons>
							<text>小李、小张、小何觉得很赞</text>
						</view>
						<view>
							<view>
								<text class="interName">小李：</text>
								<text>真好啊！</text>
							</view>
							<view class="itemPinglun">
								<text class="interName">小张：</text>
								<text>太适合我们了！</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="taskDetailBottom">
			<view class="taskDetailPrice">
				<text class="taskDetailY">￥</text>
				<text>10万</text>
			</view>
			<view class="taskBottonBtn">领任务</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			/* 返回首页 */
			goHome: function() {
				console.log(1);
				uni.switchTab({
					url: '../index/index'
				})
			},
		}
	}
</script>

<style scoped lang="less">
	/* 引入color.less */
	@import url("../../static/color.less");

	/* 引入fontSize.less */
	@import url("../../static/fontSize.less");

	/* 主体 */
	.interaction10 {
		background-color: #F5F5F5;
	}

	/* 头部 */
	.interaction10-header {
		height: 150rpx;
		position: sticky;
		top: 0;
		background-color: @masterColor;
		z-index: 900;

		/* 内容 */
		.interaction10-header-box {
			display: flex;
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			color: @colorWrite;
			align-items: center;
			justify-content: space-between;

			view {
				&:first-child {
					width: 564rpx;
					font-size: @fontBigger;

					/* 标题 */
					.interaction10-header-box-title {
						padding-left: 34rpx;
						font-size: @fontBigger;
					}

					&>text:last-child {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				&:last-child {
					width: 78rpx;
					margin-right: 32rpx;

					image {
						width: 78rpx;
						height: 78rpx;
						border-radius: 50%;
					}
				}

				display: flex;
				align-items: center;
			}

			/* iconfont */
			.iconfont {
				margin: 0 25rpx 0 13rpx;
				font-weight: bold;
				font-size: 55rpx;
			}
		}
	}


	.navRight {
		width: 100%;
		text-align: right;
	}

	.noBorder {
		border: none !important;
	}

	.interZanBox {
		margin-bottom: 20rpx;
	}

	.itemPinglun {
		margin-bottom: 30rpx;
	}

	.interName {
		color: #003EB3
	}

	.interDianzan {
		justify-content: space-around;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #F8F8F8;
		padding-bottom: 20rpx;
	}

	.interactionItem {
		margin-top: 30rpx;
		border-bottom: 5px solid #F8F8F8;
	}

	/* ============================ */
	.title {
		width: 100%;
		text-align: center;
	}

	.padding30 {
		padding: 30rpx;
	}

	.taskDatalAvater {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.flex {
		display: flex;
	}

	.faBuTime {
		font-size: 25rpx;
		color: #C0C0C0;
	}

	.taskDetailTitle {
		margin: 20rpx 0;
	}

	.taskDetailMiaosu {
		font-size: 27rpx;
	}

	.taskDetaiImg {
		width: 220rpx;
		height: 220rpx;
	}

	.taskDetailBottom {
		width: 100vw;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.taskBottonBtn {
		width: 60vw;
		background-color: #007AFF;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
	}

	.taskDetailPrice {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		line-height: 80rpx;
		color: #FF0000;
		width: 40vw;
	}

	.taskDetailY {
		font-size: 25rpx;
	}
</style>
